<template>
  <div class="page-mobile-capital-card">
    <white-header
      :isShowTopNav="true"
      :isShowBack="true"
      :isShowRight="true"
      title="资金明细"
    ></white-header>
    <div class="order-detail">订单详情</div>
    <div
      class="order-item"
      v-for="(item, index) in buy_water_list"
      :key="index"
    >
      <div class="order-title">
        <div class="title-left">订单号：{{ item.orderNo }}</div>
        <div class="title-right">{{ formatTime(item.createTime) }}</div>
      </div>
      <div
        :class="[
          'order-content',
          kl_md.KLGL == 1 && item.type == 1 ? 'gelin-card' : ''
        ]"
      >
        <div class="content-left">
          <img
            v-if="item.type == 1 && item.course && item.course.iconPath"
            :src="item.course.iconPath"
            alt=""
          />
          <img
            v-if="item.type == 2"
            src="/img/mobile/member-default-bg.png"
            alt=""
          />
          <img
            v-if="item.type == 3"
            src="/img/mobile/course-combo-bg.png"
            alt=""
          />
        </div>
        <div class="content-right">
          <div class="order-name">{{ item.name }}</div>
          <div class="origin-price">价格：&yen;{{ item.originalPrice }}</div>
          <div class="price">实付：{{ item.cost }}元</div>
        </div>
      </div>
    </div>
    <div class="footer" v-show="buy_water_list.length != 0">
      <span class="tips">我是有底线的</span>
    </div>
    <van-empty
      description="暂时没有订单哟~"
      v-show="buy_water_list.length == 0"
    />
  </div>
</template>

<script>
import {
  getWaterList,
  getActivationRecordList,
  getBuyWaterList
} from "~/api/order";
import WhiteHeader from "~/components/mobile/WhiteHeader.vue";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  props: ["setDisabled", "refreshFun", "setLoading"],
  components: {
    WhiteHeader
  },
  data() {
    return {
      buy_water_list: [], //消费记录列表
      //消费记录分页配置
      buyWater: {
        page: 1,
        pageSize: 10,
        total: 0
      }
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      token(state) {
        return state.token;
      },
      is_ios(state) {
        return state.is_ios;
      },
      is_in_wechat(state) {
        return state.is_in_wechat;
      },
      is_in_minigram(state) {
        return state.is_in_minigram;
      },
      is_loading(state) {
        return state.is_loading;
      },
      kl_md(state) {
        return state.kl_md;
      },
      is_wechat_ios_limit(state) {
        return state.is_wechat_ios_limit;
      }
    }),
    is_show_price() {
      if (this.is_wechat_ios_limit) {
        return this.is_ios && this.is_in_wechat;
      } else {
        return false;
      }
    },
    is_allow() {
      if (!this.recharge_num) {
        return false;
      } else {
        return true;
      }
    },
    active_query() {
      return this.$route.query.active;
    },
    num() {
      return this.$route.query.num;
    },
    redirect_url() {
      return this.$route.query.rdurl;
    }
  },
  watch: {},
  destroyed() {
    window.removeEventListener("scroll", this.eventListener);
    this.setDisabled(true);
  },
  deactivated() {
    window.removeEventListener("scroll", this.eventListener);
    this.setDisabled(true);
  },
  activated() {
    if (process.client) {
      if (!this.token && Object.keys(this.user_info).length == 0) {
        this.$router.replace("/m/login");
      }
      window.addEventListener("scroll", this.eventListener);
    }
    this.setDisabled(false);
    this.refreshFun(() => {
      this.buyWater = {
        page: 1,
        pageSize: 10,
        total: 0
      };
      this.getBuyWaterListFun();
      this.setLoading(false);
    });
  },
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    formatTime(timestamp) {
      var newTime = new Date(timestamp);
      var y = newTime.getFullYear();
      var m = newTime.getMonth() + 1;
      var d = newTime.getDate();
      var add0 = m => {
        return m < 10 ? "0" + m : m;
      };
      return add0(y) + "-" + add0(m) + "-" + add0(d);
    },
    async getBuyWaterListFun(fetch_type) {
      this.SET_IS_LOADING(true);
      const { page, pageSize, total } = this.buyWater;
      let params = {
        userId: this.user_info.id,
        sort: "id desc",
        offset: pageSize * (page - 1),
        limit: pageSize
      };
      let result = await getBuyWaterList(params);
      console.log("消费记录:", result);
      if (result && result.data && result.data.code == 200) {
        if (fetch_type == "pullup") {
          this.buy_water_list = [
            ...this.buy_water_list,
            ...result.data.data.rows
          ];
        } else {
          this.buy_water_list = result.data.data.rows;
        }
        this.buyWater.total = result.data.data.total;
        this.SET_IS_LOADING(false);
      } else {
        this.SET_IS_LOADING(false);
        this.$toast(this.$t("locale.pc.personal.t124"));
      }
    },
    pullUp() {
      // 滚动条离顶部的距离
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 窗口可视区域高度
      let clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      // 滚动区域高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      // 滚动条 + 可视区域高度 >= 滚动条高度 ==>  滚动条触底
      if (scrollTop + clientHeight >= scrollHeight - 120) {
        console.log("上拉加载");
        if (this.buyWater.total <= this.buy_water_list.length) {
          return;
        }
        if (this.is_loading) {
          return;
        }
        this.buyWater.page++;
        this.getBuyWaterListFun("pullup");
      }
    },
    eventListener() {
      this.throttle(this.pullUp, 30);
    },
    throttle(fn, delay) {
      let lastTime = 0;
      return !(function() {
        let nowTime = Date.now();
        if (nowTime - lastTime > delay) {
          fn.call(this);
          lastTime = nowTime;
        }
      })();
    }
  },
  created() {
    if (process.client) {
      if (!this.token && Object.keys(this.user_info).length == 0) {
        return this.$router.replace("/m/login");
      }
    }
    this.setDisabled(false);
    this.getBuyWaterListFun();
    this.refreshFun(() => {
      this.buyWater = {
        page: 1,
        pageSize: 10,
        total: 0
      };
      this.getBuyWaterListFun();
      this.setLoading(false);
    });
  },
  mounted() {
    if (process.client) {
      window.addEventListener("scroll", this.eventListener);
    }
  }
};
</script>

<style lang="scss" scoped>
.page-mobile-capital-card {
  width: 100vw;
  min-height: 100vh;
  background-color: #f7f7fa;
  .footer {
    padding: 0.3rem;
    font-size: 0.26rem;
    color: #babec2;
    text-align: center;
    .tips {
      position: relative;
    }
    .tips::before {
      content: "";
      display: block;
      position: absolute;
      left: -1.7rem;
      top: 50%;
      transform: translateY(-1px);
      width: 1.5rem;
      height: 1px;
      background: #babec2;
    }
    .tips::after {
      content: "";
      display: block;
      position: absolute;
      right: -1.7rem;
      top: 50%;
      width: 1.5rem;
      transform: translateY(-1px);
      height: 1px;
      background: #babec2;
    }
  }
  .order-detail {
    width: 100%;
    height: 1.056rem;
    line-height: 1.056rem;
    color: #313233;
    font-weight: bold;
    font-size: 0.3072rem;
    padding-left: 0.3rem;
    // border-top: 0.026rem solid #f7f7fa;
    background-color: #ffffff;
    margin-bottom: 0.192rem;
  }
  .order-item {
    width: 100%;
    height: 3.36rem;
    background-color: #ffffff;
    margin-bottom: 0.192rem;
    padding: 0 0.2496rem;
    .order-title {
      // color: #adafb3;
      color: #494a4d;
      font-size: 0.2304rem;
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 0.8256rem;
      line-height: 0.8256rem;
      border-bottom: 0.026rem solid #ededf1;
    }
    .order-content {
      padding: 0.35rem 0;
      display: flex;
      justify-content: space-between;
      .content-left {
        width: 2.592rem;
        height: 1.728rem;
        border-radius: 0.04rem;
        background: var(--theme-color);
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      .content-right {
        width: 3.84rem;
        height: 1.728rem;
        .order-name {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #494a4d;
          font-weight: bold;
          font-size: 0.3rem;
        }
        .origin-price {
          margin: 0.2rem 0 0.3rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-weight: bold;
          font-size: 0.3rem;
          color: #adafb2;
        }
        .price {
          text-align: right;
          color: var(--theme-color);
          font-size: 0.3rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-weight: bold;
        }
      }
    }
    .order-content.gelin-card {
      .content-left {
        width: 1.2992rem;
        margin-left: 0.6464rem;
      }
    }
  }
}
</style>
<style lang="scss">
.page-mobile-capital-card {
}
</style>
